.filters {
  width: 750px;
  height: 92px;
  border-bottom: 2px solid #f2f2f2;
  @apply bg-[#ffffff] gap-[112px] box-border flex flex-row justify-center items-center;
  .filter {
    line-height: 92px !important;
    @apply self-stretch relative box-border text-[32px] font-normal text-[#666666];
    &::after {
      content: "";
      height: 4px;
      @apply absolute bottom-0 left-[24px] right-[24px] rounded-[10px];
    }
    &.filter__current {
      @apply text-[#333333];
      &::after {
        @apply bg-[#5278FD];
      }
    }
  }
}
.list {
  .listItem {
    border-bottom: 2px solid #f2f2f2;
    @apply p-[32px] box-border bg-white;
    .listItemTop {
      @apply flex flex-row;
      .image {
        width: 132px;
        height: 132px;
        @apply mr-[28px] rounded-[8px] block object-cover;
      }
      .infos {
        @apply flex flex-col justify-between box-border;
        .name {
          @apply text-[#333333] font-500 text-[32px];
        }
        .desc {
          @apply flex flex-row items-center;
          .rate {
            width: 62px;
            height: 36px;
            border-radius: 16px 16px 16px 0;
            @apply bg-[#FF8615] text-[#FFFFFF] text-[24px] font-700 flex flex-row justify-center items-center box-border;
          }
          .vLine {
            @apply mx-[12px];
          }
          .rateDesc {
            @apply text-[#FF8615] text-[28px] ml-[8px] font-500;
          }
          .comment,
          .intrest {
            @apply text-[#999999] text-[24px];
          }
          .intrest {
            @apply ml-[12px];
          }
        }
      }
      .distance {
        @apply text-[#999999] text-[24px];
      }
    }
    .listItemBottom {
      @apply box-border flex flex-row items-center mt-[44px];
      .date,
      .yixiang {
        @apply text-[#999999] text-[24px];
      }
      .yixiang {
        @apply ml-[4px];
      }
      .btn {
        width: 160px;
        height: 64px;
        @apply text-[28px] rounded-[32px] flex-none  flex flex-row justify-center items-center box-border;
        &.notFit {
          @apply bg-[#F1F5F9] text-[#333333] ml-auto;
        }
        &.mark {
          @apply bg-[#5278FD] text-[#FFFFFF] ml-[16px];
        }
      }
    }
  }
}
